<template>
  <!-- 引入静态结构 -->
  <div class="swiper-container" :id="id">
    <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">slider1</div> -->
        <slot></slot>
    </div>
  </div>
</template>
<script>
// 引入swiper
// import Swiper from "swiper";

// export default {
//   name: "myswipe",
//   props: {
//     id: {
//       type: String,
//       default: "sbox",
//     },
//     options: {
//       type: Object,
//       default: {
//         observer: true,
//         loop:true,
//         autoplay: {
//           delay: 3000,
//           stopOnLastSlide: false,
//           disableOnInteraction: true,
//         },
//       },
//     },
//   },
//   mounted() {
//     //   实例化swiper
//     let mySwiper=new Swiper("#"+this.id,this.Option)
//   },
// };

</script>
<script>
// 2. 引入Swiper
import Swiper from "swiper"

// 3. 满足静态结构

export default {
  name:'myswipe',
  props:{
    id:{
      type:String,
      default:"sbox"
    },
    options:{
      type:Object,
      default:{
        observer:true,
        loop:true,
        autoplay:{
          delay:3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        }
      }
    }
  },
  mounted(){
    // 4. 实例化Swiper  querySelectorAll
    var mySwiper = new Swiper("#"+this.id,this.options);
  }
}
</script>